<script setup lang="ts">
import { reactive, ref } from 'vue';
import {
  Delete
} from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const myConfig = reactive({
    toolbars: [
        [
            'undo', //撤销
            'redo', //重做
            'bold', //加粗
            'indent', //首行缩进
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            'blockquote', //引用
            'horizontal', //分隔线
            'removeformat', //清除格式
            'simpleupload', //单图上传
            'link', //超链接
            'emotion', //表情
            'spechars', //特殊字符
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'backcolor', //背景色
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'inserttable', //插入表格
        ]
    ],
    autoHeightEnabled: false,
    wordCount: true, //是否开启字数统计
    maximumWords: 500, //允许的最大字符数,
    imageMaxWidth: 200, //图片最大宽度
    imageMaxHeight: 100, //图片最大高度
    // 初始容器高度
    initialFrameHeight: 260,
    // 初始容器宽度
    initialFrameWidth: "100%",
    // 可以放后台存放路径
    serverUrl: "/ueditor/exec",
    zIndex: 1111900,
    // UEditor 是文件的存放路径，
    UEDITOR_HOME_URL: "/Ueditor/"
})
const formData = reactive({
    shopName: '',
    status: '',
    orderTime: '',
    address: '',
    phone: '',
    summary: '',
    shopList:[
        {
            price:"",
            type:"",
        }
    ],
})
const handleAvatarSuccess = () => {

}
const beforeAvatarUpload = () => {

}
// 返回
const goback = () => {
    window.history.go(-1);
}
// 保存
const onSubmit = () => {

}
// 添加规格
const addSpec = () => {
    formData.shopList.push({
        price:"",
        type:"",
    })
}
const delType = (index:number) => {
    formData.shopList.splice(index,1)
}
</script>

<template>
    <div class="add-shop">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="商品信息" name="first">
                <div style="padding:20px 40px;">
                    <el-form :model="formData" label-position="top" class="demo-form-inline">
                        <el-form-item label="商品名称：">
                            <el-input style="width:580px;" v-model="formData.shopName" placeholder="请输入" clearable />
                        </el-form-item>
                        <div style="display:flex;">
                            <el-form-item label="商品类型：">
                                <el-select v-model="formData.status" placeholder="请选择使用状态" style="width:240px"
                                    clearable>
                                    <el-option label="已使用" value="1" />
                                    <el-option label="未使用" value="0" />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="margin-left:100px;" label="商品分类：">
                                <el-select v-model="formData.status" placeholder="请选择使用状态" style="width:240px"
                                    clearable>
                                    <el-option label="未支付" value="1" />
                                    <el-option label="已支付" value="0" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="display:flex;">
                            <el-form-item label="商品价格：">
                                <div style="display:flex;">
                                    <el-input style="width:240px;" v-model="formData.shopName" placeholder="请输入"
                                        clearable />
                                    <span style="margin-left:10px;">元</span>
                                </div>
                            </el-form-item>
                            <el-form-item style="margin-left:77px;" label="商品数量：">
                                <div style="display:flex;">
                                    <el-input style="width:240px;" v-model="formData.shopName" placeholder="请输入"
                                        clearable />
                                    <span style="margin-left:10px;">件</span>
                                </div>
                            </el-form-item>
                        </div>
                        <div style="display:flex;">
                            <el-form-item label="商品展示图" prop="shopType">
                                <el-upload class="avatar-uploader" accept="image/*"
                                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <el-icon class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="商品视频介绍" style="margin-left:160px;" prop="shopType">
                                <el-upload class="avatar-uploader" accept="video/*"
                                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <el-icon class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="商品简介">
                                <el-input style="width:580px;" v-model="formData.shopName" type="textarea" />
                            </el-form-item>
                            <el-form-item label="详情介绍">
                                <vue-ueditor-wrap v-model="formData.summary" :config="myConfig"
                                    editor-id="editor-demo-01">
                                </vue-ueditor-wrap>
                            </el-form-item>
                        </div>
                        <div
                            style="display:flex;align-items:center;margin-top:100px;margin-left:200px;padding-bottom:80px;">
                            <el-form-item>
                                <el-button style="width:100px;" @click="goback">返回</el-button>
                                <el-button style="width:100px;" type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="规格信息" name="second">
               <div style="padding:20px 40px;">
                    <el-button type="primary" @click="addSpec">新增规格</el-button>
                    <el-form :model="formData" style="margin-top:40px;" class="demo-form-inline">
                        <div style="display:flex;" v-for="(item,index) in formData.shopList" :key="index">
                            <el-form-item label="商品所属规格：">
                                <el-select v-model="item.price" placeholder="请选择使用状态" style="width:240px"
                                    clearable>
                                    <el-option label="已使用" value="1" />
                                    <el-option label="未使用" value="0" />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="margin-left:40px;" label="商品规格分类：">
                                <div style="display:flex;">
                                    <el-input style="width:240px;" v-model="item.type" placeholder="请输入" clearable />
                                    <el-button type="danger" :icon="Delete" @click="delType(index)" style="margin-left:10px" />
                                </div>
                            </el-form-item>
                        </div>
                        <div
                            style="display:flex;align-items:center;margin-top:100px;margin-left:300px;padding-bottom:80px;">
                            <el-form-item>
                                <el-button style="width:100px;" @click="goback">返回</el-button>
                                <el-button style="width:100px;" type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
               </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style lang="scss" scoped>
.add-shop {
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;

    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
        border: 1px dashed #c0c0c0;
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
        border: 1px dashed #c0c0c0;
    }
}
</style>
